import { computed, defineComponent, inject, reactive, ref } from 'vue'
import { IconCaretUp, IconDelete, IconCaretDown } from '@arco-design/web-vue/es/icon';
import { Progress, DatePicker, WeekPicker, MonthPicker, QuarterPicker,Popover } from "@arco-design/web-vue";
import {numberToCurrencyNo} from '@/utils/util'
import {NumberUnit,NumberValue} from '@/constants/indexTree'
import Bus from '@/utils/emmit'
import {CompareType} from '@/constants/indexTree'
import '../../../indexTreeGraph/graphContent/IndexGraph/metricsNode.css'
import { useRouter, useRoute } from 'vue-router';
import * as RouteNames from '@/router/consts';
import './detailMetricsNode.scss'
import {getYearWeek, getQuerterFormatter,getDateOfWeek, showQuerterFormatter} from '@/utils/util';
export default defineComponent({
  name: 'MetricsNode',
  inject: ["getGraph", "getNode"],

  // emits: ['addIndexItem'],
  setup: (props, {emit}) => {
    const router = useRouter();
    const getGraph = inject('getGraph')
    const getNode: any = inject('getNode')
    const state = reactive(getNode().getData())
    const { onSingleCardFilter,onPopPicker, onGlobalFilter, ...rest } = state
    const unit = NumberUnit[state?.metricsSetting?.numberFormat] || ''
    const numberType = Number(state?.gapValue.replace('%', ''))

    let numberTarget:any
    if (typeof(state?.value)=='string' && state?.value.indexOf('%') > -1) {
      numberTarget=Number(state?.value.replace('%', ''))
    } else {
      numberTarget=Number(state?.value)
    }
    const targetValue = numberTarget * Number(NumberValue[state?.metricsSetting?.numberFormat])
    const precess = state?.target && (Number(targetValue)/state.target)


    const timeType = state?.dateCondition?.timeUnit

    const pickerValue = ref<any>()
    const showCardPicker = ref<boolean>(false)

    const dateCondition = state.dateCondition

    const compareType = state?.compare?.compareType != 'VAL'

    let dateTimeTypes = dateCondition.fixDate || state?.dateTime
    // 默认数据时间的配置
    if (timeType === 'WEEK') {
      let start = dateTimeTypes.split("-");
      if (start.length === 2) {
        dateTimeTypes = getDateOfWeek(start[1], start[0]);
      }
    }
    if (timeType === 'QUARTER') {
      if (dateTimeTypes.indexOf('Q')>-1) {
        dateTimeTypes = showQuerterFormatter(dateTimeTypes)
      }  
    }

    pickerValue.value = dateTimeTypes
    const popVisible = ref<boolean>(false)
    const changeDatePicker = (v:string) => {
      onSingleCardFilter?.(v,rest)
      console.log(v)
      showCardPicker.value = false
    }
    const visibleChange = (v:boolean) => {
      showCardPicker.value = v
      popVisible.value = v
      onPopPicker?.(v)
    }

    let a = "#" + state.keys
    

    // const jumpToIdnexDashbord = (v:any) => {
    //   router.push({
    //     name: RouteNames.ROUTER_PUBLIC_DASHBOARD
    //   })
    // }
    const renderDom = () => {
      switch(timeType) {
        case 'WEEK' :
          return (
            <WeekPicker 
              // @ts-ignore
              onChange={changeDatePicker}
              class="ml-6 picker-timer"
                size='mini'
              onPopupVisibleChange={visibleChange}
              popup-visible={popVisible}
              allow-clear={false}
              v-model={pickerValue}>
            </WeekPicker>
          )
          case 'MONTH' :
            return (
              <MonthPicker 
                  // @ts-ignore
                  onChange={changeDatePicker}
                  onPopupVisibleChange={visibleChange}
                  class="ml-6 picker-timer"
                  size='mini'
                  allow-clear={false}
                  v-model={pickerValue}>

                </MonthPicker>
            )
            case 'QUARTER' :
              return (
                <QuarterPicker
                  // @ts-ignore
                  onChange={changeDatePicker}
                  onPopupVisibleChange={visibleChange}
                  class="ml-6 picker-timer"
                  size='mini'
                  allow-clear={false}
                  v-model={pickerValue}>
                </QuarterPicker>
              )
              default :
                return (
                  <DatePicker 
                  // @ts-ignore
                      onChange={changeDatePicker}
                      onPopupVisibleChange={visibleChange}
                      class="ml-6 picker-timer"
                      size='mini'
                      allow-clear={false}
                      
                      v-model={pickerValue}>
                  </DatePicker>
                )
      }
    }
    return () => {
      return (
        <>
            <div
              onMouseover={() => (showCardPicker.value = true)}
              onMouseout={() => (showCardPicker.value = popVisible.value)}
            >
            <div class={["single-index-card", "detailHoverLight", {hoverCard: showCardPicker.value}]}>
                <div class="detail-index-card">
                    <div class="detail-card-inner-content">
                        <div class='index-line-border' v-show={state?.rootTreeCard}></div>
                        <div class="index-card-wrapper">
                            <Progress
                                v-show={state?.target}
                                class="index-pregress"
                                percent={precess}
                                show-text={false}
                                type="circle"
                                trackColor="#eee"
                                color='#3C6EFF'
                                size="small"
                                strokeWidth={7}
                            ></Progress>
                            <div class="index-card-wrapper_middle">
                                <span class="index-card-name" title={state?.cardName}>{state.cardName}</span>
                                <span class='index-card-num' >{state?.value}{unit}</span>
                            </div>
                            <div class="index-card-wrapper_right">
                            <span class="col_grey">{state?.compare?.compareName}</span>
                              <span class="dis-flex">
                                <span class='col_red' v-show={numberType > 0 && compareType}>
                                    <IconCaretUp/>
                                </span>
                                <span class="col_240" v-show={numberType < 0 && compareType}>
                                    <IconCaretDown/>
                                </span>
                                <span class={{col_red: numberType >= 0, col_240: numberType < 0}}>
                                  {state?.gapValue}
                                </span>
                              </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
           <div class="index-card-opera" v-show={showCardPicker.value} id={state.keys}>
                {/* <div class="check-index-dashborad" 
                  onClick={()=>jumpToIdnexDashbord(state)}>
                  查看指标看板
                </div> */}
                {renderDom()}
            </div>
            </div>
          </>
      )
    }
  },

})
